<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
    <link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/font-awesome.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/good.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <style>
        #page-wrapper h1{ display: block; margin-bottom: 20px; border-bottom:1px solid #999; font-size: 16px; padding-left:2px; font-weight: bold; line-height: 35px;}
        select.year,select.mouth{ width: 100px;}
        #btn{ display: inline-block; background-color: #ffbe34; line-height: 35px; padding: 0 15px; font-size: 14px; color: #fff; border-radius: 4px; cursor: pointer;}
        #depart-box{ display: block; padding: 20px;}
        #depart-box label{ display: inline-block; margin: 20px 20px 0;}
        #depart-box .bot{ display: block; padding-top: 50px; text-align: center;}
        #fileValue{opacity: 0; width: 0px; height: 0px; font-size: 0px;}
        #file{display: inline-block;}
        .tform-group .control-label{ text-align: right;}
        .date{ float: left; width: 240px; padding-right: 10px;}
        .text-warning{ display: inline-block;}
        #departId{ width: 0; height: 0; opacity: 0; font-size: 0;}
    </style>
</head>
<body>

<div class="panel panel-lzy">
    <div class="panel-body">
        <h5 class="tips-lzy">操作提示</h5>
        <ul class="tips-list-lzy">
            <li><span>◆&nbsp;<span>新建产品分类后关联部门，然后再新建产品时关联分类，即可指定不同部门销售不同分类的产品。</span></li>
        </ul>
    </div>
</div>

<div id="page-wrapper" >
    <div class="panel panel-f5">
        <div class="panel-body row">
            <form id="Form" class="form-horizontal" method="post">
                <input type="hidden" id="_ctx" value="${basePath}"/>
                <input type="hidden" id="id" name="id" <#if dto??>value="${dto.id!}"</#if>/>
                <input type="hidden" id="mark" value="${dto.mark!}" />
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font color="red">*</font>&nbsp;分类名称：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="30" name="name" maxlength="10" placeholder="最多输入10字"
                               <#if dto??>value="${dto.name!}"</#if>>
                        <#--<span class="text-warning">0/10</span>-->
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font color="red">*</font>&nbsp;分类开放部门：</span>
                    <div class="col-sm-9 col-xs-8">
                        <span class="depart-name">${nameList!}
                        <#--<#if nameList??>-->
                            <#--<#list nameList as name>-->
                                <#--${name} /-->
                            <#--</#list>-->
                        <#--</#if>-->
                        </span>
                        <button type="button" class="btn btn-yellow" id="btn">选择部门</button>
                        <#if (deptIdList)??>
                            <input id="departId" type="text" name="idList" value="">
                        <#else>
                            <input id="departId" type="text" name="idList" value="">
                        </#if>
                        <span class="text-warning">请设置可以销售该分类的部门</span>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">分类总发行量：</span>
                    <div class="col-sm-9 col-xs-8">
                        <#if (dto)??>
                            <input id="circulation" type="text" class="form-control" size="30" name="circulation" min="1"  maxlength="6"
                                   value="${dto.circulation?c}" readonly>
                        <#else>
                            <input id="circulation" type="text" class="form-control" size="30" name="circulation" min="1"  maxlength="6"
                                   value="">
                            <span class="text-warning">请输入数字</span>
                        </#if>
                    </div>
                </div>
                <#if (dto)??>
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span">开始时间：</span>
                        <div class="col-sm-9 col-xs-8">
                            <div class="col-sm-6" style="margin:0; padding:0">
                                <div id="start_visit_time"  class="input-group date form_datetime">
                                    <input id="startTime" name="startTime" class="form-control" size="25" value="${dto.startTime!}" type="text" readonly>
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                </div>
                                <span class="text-warning control-label">请选择销售开始时间</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span">结束时间：</span>
                        <div class="col-sm-9 col-xs-8">
                            <div class="col-sm-6" style="margin:0; padding:0">
                                <div id="end_visit_time" class="input-group date form_datetime">
                                    <input id="endTime" name="endTime" class="form-control" size="25" value="${dto.endTime!}" type="text" readonly>
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                </div>
                                <span class="text-warning control-label">请选择销售结束时间</span>
                            </div>
                        </div>
                    </div>
                <#else>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">开始时间：</span>
                    <div class="col-sm-9 col-xs-8">
                        <div class="col-sm-6" style="margin:0; padding:0">
                            <div id="start_visit_time"  class="input-group date form_datetime">
                                <input id="startTime" name="startTime" class="form-control" size="25" value="" type="text">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                            <span class="text-warning control-label">请选择销售开始时间</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">结束时间：</span>
                    <div class="col-sm-9 col-xs-8">
                        <div class="col-sm-6" style="margin:0; padding:0">
                            <div id="end_visit_time" class="input-group date form_datetime">
                                <input id="endTime" name="endTime" class="form-control" size="25" value="" type="text">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                            <span class="text-warning control-label">请选择销售结束时间</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4"></span>
                    <div class="col-sm-9 col-xs-8">
                        <span class="verify-tip">总发行量或时间至少选填一项</span>
                        <span class="verify-tip">请选择开始和结束时间</span>
                    </div>
                </div>
                </#if>
                <div class="form-group">
                    <span class="control-label col-sm-4 col-xs-4"></span>
                    <div class="col-sm-8 col-xs-8">
                    <#if (dto)??>
                        <button type="button" class="btn btn-success" onclick="submitFormEdit();"><i class="fa fa-check"></i> 提交</button>
                    <#else>
                        <button type="button" class="btn btn-success" onclick="submitForm();"><i class="fa fa-check"></i> 提交</button>
                    </#if>
                        <button type="button" class="btn btn-info" onclick="goBack()"><i class="fa fa-close"></i>返回</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<div id="depart-box" style="display: none;">
    <#list deptList as dept>
        <label><input type="checkbox" name="classifyName" value="${(dept.id)?c}"> <span>${dept.deptName!}</span></label>
    </#list>
    <div class="bot">
        <button type="button" class="btn btn-success">确定</button>
    </div>
</div>

<script src="${basePath}/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/plugin/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/language/zh_CN.js"></script>
<script type="text/javascript">
    $(window).bootstrapValidator || document.write('<script src="${basePath}/bootstrap/js/bootstrapValidator.min.js"><\/script>'+
            '<script src="${basePath}/bootstrap/js/bootstrapValidator-zh_CN.js"><\/script>');
</script>
<script src="${basePath}/bootstrap/js/common.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${basePath}/bootstrap/js/campsite.js" type="text/javascript"></script>
<script>

    var idArr = [],nameArr = [];
    <#if deptIdList??>
    <#list deptIdList as item>
    idArr.push(${item?c});
    $("#departId").val(idArr.join(","));
    </#list>
    </#if>

    //结束日期大于开始日期
    $(function(){
        $('#start_visit_time').datetimepicker({
            minView: 1, //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd hh", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
//            startDate: new Date(),
            autoclose:true //选择日期后自动关闭
        }).on("changeDate",function(){
            $("#end_visit_time").datetimepicker("setStartDate",$("#startTime").val());
        });
        $('#end_visit_time').datetimepicker({
            minView: 1, //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd hh", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
//            startDate: new Date(),
            autoclose:true //选择日期后自动关闭
        }).on("changeDate",function(){
            $("#start_visit_time").datetimepicker("setEndDate",$("#endTime").val());
        });

        //分类编辑判断时间
        var mark = "${dto.mark!}";
        if(mark == "1"){
            $("#start_visit_time").datetimepicker("setStartDate",new Date());
        }
        else if(mark == "2"){
            $('#start_visit_time').datetimepicker('remove');
            $("#end_visit_time").datetimepicker("setStartDate",new Date());
        }
        else if(mark == "3"){
            $('#start_visit_time').datetimepicker('remove');
            $('#end_visit_time').datetimepicker('remove');
        }

        $("#depart-box label input").each(function(){
            if(idArr.indexOf(parseInt($(this).val())) != "-1"){
                $(this).prop("checked",true)
            }
        })


        $("#btn").click(function(){
            //请求数据成功后 => 弹窗
            //$.ajax();
            var box = $("#depart-box");
            var nameArr = [],idArr = [];
            layer.open({
                type: 1,
                area: ['500px', '400px'],
                title: '部门选择',
                content: box,
                success: function(){
                    box.find("button").off("click").click(function(){
                        box.find("label").each(function(){
                            var _this = $(this).find("input");
                            if(_this.is(":checked")){
                                idArr.push(_this.val());
                                nameArr.push(_this.siblings("span").text());
                            }
                        });
                        //赋值
                        $(".depart-name").html(nameArr.join(" / ")).show().change();
                        $("#departId").val(idArr).change();
                        layer.closeAll();
                    })
                },
                end: function(){
                    layer.closeAll();
                }
            });
        })

    });

    function goBack(){
        window.location.href = "${basePath}/admin/product/classify"
    }

    function submitForm() {
        var bsVal = $("#Form").data('bootstrapValidator');
        bsVal.validate();
        if($("#circulation").val() == "" && $("#startTime").val() == ""){
            $(".verify-tip").eq(0).css("display","block");
            return false
        }
        else if($("#startTime").val().length != $("#endTime").val().length){
            $(".verify-tip").eq(1).css("display","block");
            return false
        }
        else if(bsVal.isValid()){
            $(".verify-tip").hide();
            $.ajax({
                type : 'POST',
                dataType: 'json',
                url:  '${basePath}/admin/product/classify/save',
                data: $("#Form").serialize(),
                success: function (data) {
                    if(data.code == '0'){
                        layer.alert('操作成功', {
                            icon : 1
                        },function() {
                            window.location.href='${basePath}/admin/product/classify';
                        })
                    }else{
                        layer.alert(data.desc, {
                            icon : 5
                        });
                    }
                },
                error: function(){
                    layer.alert('系统错误', {
                        icon : 5
                    });
                }
            });

        }
        else{
            var smallTop = $("small:visible").eq(0).offset().top - 50;
            $("html,body").animate({scrollTop:smallTop},300);
        }
    }

    function submitFormEdit() {
        var bsVal = $("#Form").data('bootstrapValidator');
        bsVal.validate();
        if(bsVal.isValid()){
            $.ajax({
                type : 'POST',
                dataType: 'json',
                url:  '${basePath}/admin/product/classify/update',
                data: $("#Form").serialize(),
                success: function (data) {
                    if(data.code == '0'){
                        layer.alert('操作成功', {
                            icon : 1
                        },function() {
                            window.location.href='${basePath}/admin/product/classify';
                        })
                    }else{
                        layer.alert(data.desc, {
                            icon : 5
                        });
                    }
                },
                error: function(){
                    layer.alert('系统错误', {
                        icon : 5
                    });
                }
            });

        }
        else{
            var smallTop = $("small:visible").eq(0).offset().top - 50;
            $("html,body").animate({scrollTop:smallTop},300);
        }
    }

    //表单验证
    $('#Form').bootstrapValidator({
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: '请输入分类名称'
                    }
                }
            },
            idList: {
                trigger: "change",
                validators: {
                    notEmpty: {
                        message: '请选择分类开放部门'
                    }
                }
            },
            circulation: {
                validators: {
                    regexp: {
                        regexp: regNumber,
                        message: '请输入整数'
                    }
                }
            },
        }
    });
</script>
</body>
</html>
